<template>
  <div
    v-loading="loading"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.3)"
    style="height: 100%;overflow: auto;"
  >
    <div class="rainInfo_top">
         <div style="margin-bottom:16px">
         <div>
            <div>
                <span>河段编码：</span><span>{{ ForecastList.fcd || '&nbsp;' }}</span>
            </div>
         </div>
          <div>
            <div>
                <span>洪峰流量(m³/s)：</span>
                <span class="spaninline">{{ ForecastList.maxQ ? ForecastList.maxQ : "" }}</span> <span v-if="maxQname" class="spaninline m-l-10">({{maxQname}}年一遇)</span>
            </div>
         </div>
         <div>
            <div>
                <span>峰现时间：</span><span>{{ ForecastList.mxTm?$moment(ForecastList.mxTm).format("YYYY-MM-DD HH:mm"):'&nbsp;'}}</span>
            </div>
         </div>
         <div>
            <div>
                <span>累计雨量(mm)：</span><span>{{ ForecastList.accp ? ForecastList.accp : "0" }}</span>
            </div>
         </div>
         </div>
  
    </div>
    <div class="subtitle">河段洪水过程图</div>
    <div class="echartsWrap" :class="{'posrtlv':!times.length}">
      <div id="waterLevel" />
      <div class="echartsWrapnoData" v-if="!times.length&&!loading">
          <div class="noDataLists">
              暂无数据
         </div>
      </div>
    </div>
  </div>

</template>
<script>
import {
    GetForecastByRivel,
    GetForecastByAddvcd
} from '@/api/zyx.js'
export default {
    // 接受父组件传递的值
    props: ['fadata'],
    data() {
        return {
            ForecastList: {},
            parameter: {},
            times: [],
            loading: false,
            WarnIndexData: {
                'level1': '',
                'level2': '',
                'level3': '',
                'level4': ''
            },
            streetData: {
                ftime: ''
            },
            floodForecastData: {
                'stq': [], // 入库流量或实测流量
                'stz': [], // 实测水位
                'fq': [], // 预报流量
                'fz': [], // 预报水位
                'pt': [] // 雨量
            },
            maxLl: '', // 流量最大值
            minLl: '', // 流量最小值
            maxSw: '', // 水位最大值
            minSw: '', // 水位最小值
            maxLll:'',//流量Y轴最大值
            maxQname:'',


        }
    },
    mounted() {
        this.GetForecastByRivel()
    },
    created() {},
    methods: {
        GetForecastByRivel() { // 对接列表数据
            this.loading = true
            this.parameter = this.$store.getters.dlgParams.params;
           // console.log(this.parameter)
            let param = {
                Rvcd: this.parameter.rvcd,
                dtTime: this.parameter.perioD_END
            }
            //有河道编码的洪水分析
            let urls = '/api/FloodAnalysis/GetForecastByRivel';
            //api/FloodAnalysis/GetForecastByAddvcd
            if(this.parameter.ewcodetype == '2'){
                param = {
                 'Addvcd':this.parameter.rvcd,
                 'dtTime': this.parameter.perioD_END
               };
               urls = '/api/FloodAnalysis/GetForecastByAddvcd'
            }
            
            GetForecastByAddvcd(param,urls).then((res) => {
                this.loading = false
                if (res.isSuccess && res.data) {
                    this.ForecastList = res.data
                    this.WarnIndexData.level1 = this.ForecastList.risk1L
                    this.WarnIndexData.level2 = this.ForecastList.risk2L
                    this.WarnIndexData.level3 = this.ForecastList.risk3L
                    this.WarnIndexData.level4 = this.ForecastList.risk4L
                    this.streetData.ftime = this.$moment(this.ForecastList.eTime).format('YYYY-MM-DD HH:mm');
                   // alert(this.streetData.ftime)
                    if (this.ForecastList.lstFd) {
                        var that = this
                        this.ForecastList.lstFd.forEach(function(item, index) {
                            that.times.push(that.$moment(item.tm).format('YYYY-MM-DD HH:mm'))
                            that.floodForecastData.stq.push(item.minq ? parseFloat(item.minq) : null) // 实测流量
                            that.floodForecastData.stz.push(item.mz ? parseFloat(item.mz) : null)			// 实测水位
                            that.floodForecastData.fq.push(item.finq ? parseFloat(item.finq) : null)		// 预报流量
                            that.floodForecastData.fz.push(item.fz ? parseFloat(item.fz) : null)			// 预报水位
                            that.floodForecastData.pt.push(item.p ? parseFloat(item.p) : null)				// 降雨
                        })
                    };
                     let levh =  this.ForecastList.levelH;
                    switch(levh){
                        case 1:
                            that.maxQname = '<2';
                        break;
                        case 2:
                            that.maxQname = '2-5';
                            break;
                        case 3:
                            that.maxQname = '5-10';
                        break;
                        case 4 :
                            that.maxQname = '10-20';
                        break;
                         case 5 :
                            that.maxQname = '20-50';
                        break;
                         case 6 :
                            that.maxQname = '50-100';
                        break;
                         case 7 :
                            that.maxQname = '>100';
                        break;
                        default:
                        that.maxQname = '';
                    };
                   
                     
                    this.getEchart();
                } else {
                    this.$message.error(res.message)
                }
            }).catch(err=>{
                 this.loading = false;
            });
        },
        handleSizeChange: function(size) {
            this.pagesize = size
        },
        handleCurrentChange: function(currentPage) {
            this.currentPage = currentPage
        },
        getEchart() {
            var _this = this
            var arrLLData = _this.floodForecastData.stq
            arrLLData = arrLLData.concat(_this.floodForecastData.fq)
            arrLLData.sort(function(a, b) {
                return b - a
            })
            _this.maxLl = arrLLData[0]
            _this.minLl = arrLLData[arrLLData.length - 1]
            var bottomMarginL = (arrLLData[0] - _this.minLl) * 0.8 // 取最大最小差值的10%，间隔数据与X轴
          //  console.log(_this.floodForecastData)
          let tileng = this.times.length;
          let exnum = Math.ceil(tileng/50) //Math.floor(tileng/50);
          let datazoomflg = true;// tileng>100?true:false;
          _this.maxLll = _this.WarnIndexData.level1> _this.maxLl?_this.WarnIndexData.level1+20: _this.maxLl;
         //  console.log(exnum)
            // 饼图
            const option = {
                title: [{
                    show:false,
                    left: 'center',
                    subtextStyle: {
                        align: 'right',
                        fontSize: 16,
                        color: '#ffffff'
                    },
                    subtext: '河段洪水过程图'
                }],
                tooltip: {
                    trigger: 'axis',
                    orient: 'vertical',
                    right: 20,
                    top: 20,
                    textStyle:{
                      color: '#ffffff',
                    },
                    backgroundColor:'rgba(2,0,31,0.65)',
                    borderColor:'rgba(2,0,31,0.65)',
                    //formatter: '{b0}<br />{a2}: {c2}<br />{a0}: {c0}<br />{a1}: {c1}'
                },
                axisPointer: {
                      link: {
                            // 实现多个图的贯穿 X 轴提示线 
                            xAxisIndex: 'all',
                        }
                },
                legend: {
                    data: [{
                        name: '雨量'
                    },
                    // {
                    //     name: '实测水位',
                    //     icon: 'line'
                    // },
                    {
                        name: '预报水位',
                        icon: 'path://d="m0,0l40,0l0,10l-40,0m80,-10l40,0l0,10l-40,0l0,-10zm80,0l40,0l0,10l-40,0l0,-10zm-40,50m0,-100"'
                    },
                    // {
                    //     name: '实测流量',
                    //     icon: 'line'
                    // },
                    {
                        name: '预报流量',
                        icon: 'path://d="m0,0l40,0l0,10l-40,0m80,-10l40,0l0,10l-40,0l0,-10zm80,0l40,0l0,10l-40,0l0,-10zm-40,50m0,-100"'
                    }
                    ],
                    textStyle: {
                        fontSize: 11,
                        color: '#ffffff'
                    },
                    y: '24',
                    x: 'center',
                    //right:'60',
                },
                 toolbox: {
                    show:datazoomflg,
                    // top:'20',
                    // right:10,
                    bottom:'10',
                    right:20,
                    feature: {
                    restore: {
                     // icon:'image://'
                    },
                    },
                    iconStyle:{
                         borderColor:'#00FFFF',//"#fff",
                    },
                     emphasis:{
                        iconStyle:{
                                    borderColor:'#00FFFF',//"#fff",
                                }
                        }

                },
                grid: [{
                    bottom: '70%',
                    top: '10%',
                    left:80,
                    right:90,
                },
                {
                    top: '40%',
                    backgroundColor: 'hsl(210deg 100% 97%)',
                    left:80,
                    right:90,
                }
                ],
                 
                dataZoom: [
                    {
                    show:datazoomflg,
                    realtime: true,
                    start: 0,
                    end: 100,
                    xAxisIndex: [0, 1]
                    },
                    {
                    type: 'inside',
                    realtime: true,
                    start: 0,
                    end: 100,
                    xAxisIndex: [0, 1]
                    }
                ],
                xAxis: [{
                    type: 'category',
                    data: _this.times,
                    name: '时间(h)',
                    show: false,
                }, {
                    type: 'category',
                    data: _this.times,
                    axisLabel: {
                        textStyle: {
                            color:'#fff',
                        },
                        fontSize: 11,
                       //interval: 0,//2023-7-20 改x轴坐标(提到叠加到一块看不清楚)
                        // formatter: function(value, index) {
                          
                        //     if (value != undefined && value != '' && value != null) {
                        //         if (index > 0) {
                        //             if (index > 1) {
                        //                 if (_this.$moment(value).format('HH:mm') == '00:00') {
                        //                     return _this.$moment(value).format('DD日')
                        //                 } else {
                        //                     if(exnum){
                        //                         if( index%exnum==0){//数据太多 间隔几个展示x轴
                        //                         return _this.$moment(value).format('HH');
                        //                         }
                        //                     }else{
                        //                         return _this.$moment(value).format('HH');
                        //                     }
                                            
                        //                 }
                        //             } else {
                        //                 return ''
                        //             }
                        //         } else {
                        //             if (_this.$moment(value).format('HH:mm') == '00:00') {
                        //                 return _this.$moment(value).format('DD日')
                        //             } else {
                        //                 return _this.$moment(value).format('HH')
                        //             }
                        //         }
                        //     } else {
                        //         return ''
                        //     }
                        // }
                    },
                    gridIndex: 1,
                    name: '时间(h)',
                    nameTextStyle:{
                      color:'#fff',
                      padding:[0,0,0,5]
                     }
                   
                    
                }],
                
                yAxis: [ // 这里配置两条Y轴
                    {
                        type: 'value',
                        splitNumber: 4,
                        inverse: true, // 是否反向坐标轴
                        nameLocation: 'start', // 坐标轴名称 位置
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#2FC8DC',
                                width: 1
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#2FC8DC'
                            },
                            fontSize: 11,
                            interval: 'auto',
                            formatter: '{value}'
                        },
                        name: '雨量(mm)',
                        nameTextStyle: {
                            color: '#2FC8DC'
                        }
                    }, {
                        type: 'value',
                        splitNumber: 6,
                        gridIndex: 1,
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#2FC8DC',
                                width: 1
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#2FC8DC'
                            },
                            fontSize: 11,
                            interval: 'auto',
                            formatter: '{value}'
                        },
                        name: '水位(m)',
                        nameTextStyle: {
                            color: '#2FC8DC'
                        }
                    },
                    {
                        type: 'value',
                        splitNumber: 4,
                        gridIndex: 1,
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#39BD4E',
                                width: 1
                            }
                        },
                        axisLabel: {
                            show: true,
                            //showMaxLabel:true,
                            textStyle: {
                                color: '#39BD4E'
                            },
                            fontSize: 11,
                            interval: 'auto',
                            formatter: '{value}'
                        },
                        min: _this.minLl > 0 ? _this.minLl > bottomMarginL ? _this.minLl - bottomMarginL
                            : _this.minLl : 0,
                        max: _this.maxLll,//_this.maxLl,
                        name: '流量(m³/s)',
                        nameTextStyle: {
                            color: '#39BD4E',
                            fontSize: 11
                        }
                    }
                ],
                series: [{
                    name: '雨量',
                    type: 'bar',
                    symbolSize: 0,
                    barGap: '-100%', // 柱间距离，默认为柱形宽度的30%，可设固定值
                    barCategoryGap: '0%',
                    itemStyle: {
                        normal: {

                            color: '#14A2FF'
                        }
                    },
                    data: _this.floodForecastData.pt
                },
                // {
                //                 name: '实测水位',
                //                 type: 'line',
                //                 smooth: true,
                //                 symbolSize: 0,
                //                 xAxisIndex: 1,
                //                 yAxisIndex: 1,
                //                 showBackground: true,
                //                 itemStyle: {
                //                     normal: {
                //                         lineStyle: {
                //                             color: '#2FC8DC'
                //                         },
                //                         color: '#2FC8DC'
                //                     }
                //                 },
                //                 data: _this.floodForecastData.stz
                //             },
                {
                    name: '预报水位',
                    type: 'line',
                    smooth: true,
                    symbolSize: 0,
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    showBackground: true,
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                type: 'dashed',
                                color: '#2FC8DC'
                            },
                            color: '#2FC8DC'
                        }
                    },
                    data: _this.floodForecastData.fz
                },
                // {
                //                 name: '实测流量',
                //                 type: 'line',
                //                 smooth: true,
                //                 symbolSize: 0,
                //                 xAxisIndex: 1,
                //                 yAxisIndex: 2,
                //                 showBackground: true,
                //                 itemStyle: {
                //                     normal: {
                //                         lineStyle: {
                //                             color: '#39BD4E'
                //                         },
                //                         color: '#39BD4E'
                //                     }
                //                 },
                //                 data: _this.floodForecastData.stq
                //             },
                {
                    name: '预报流量',
                    type: 'line',
                    smooth: true,
                    symbolSize: 0,
                    xAxisIndex: 1,
                    yAxisIndex: 2,
                    showBackground: true,
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                type: 'dashed',
                                color: '#39BD4E',
                                width:2,
                            },
                            color: '#39BD4E'
                        }
                    },
                    data: _this.floodForecastData.fq
                }, {
                    name: '',
                    type: 'line',
                    xAxisIndex: 1,
                    yAxisIndex: 2,
                    markArea: {
                        emphasis: {
                            label: {
                                show: true,
                                position: 'insideBottom'
                            }
                        },
                        data: [
                            [{
                                name: '极危险' + _this.WarnIndexData.level1 + 'm³/s',
                                yAxis: _this.WarnIndexData.level1,
                                itemStyle: {
                                    color: 'rgba(231,19,0,0.6)',
                                    opacity: _this.WarnIndexData.level1 == null || _this
                                        .WarnIndexData.level1 == '' ? 0 : 1
                                },
                                label: {
                                    show: !(_this.WarnIndexData.level1 == null || _this
                                        .WarnIndexData.level1 == ''),
                                    position: 'insideBottom', // markArea中文字（name）位置
                                    offset: [-100, 0], // markArea中文字（name）显示在位置基础上x、y轴偏移
                                    color: '#fff'
                                }
                            }, {
                                yAxis:_this.maxLll,// _this.maxLl
                            }],
                            [{
                                name: '危险' + _this.WarnIndexData.level2 + 'm³/s',
                                yAxis: _this.WarnIndexData.level2,
                                itemStyle: {
                                    color: 'rgba(255,152,0,0.6)',
                                    opacity: _this.WarnIndexData.level2 == null || _this
                                        .WarnIndexData.level2 == '' ? 0 : 1
                                },
                                label: {
                                    show: !(_this.WarnIndexData.level2 == null || _this
                                        .WarnIndexData.level2 == ''),
                                    position: 'insideBottom', // markArea中文字（name）位置
                                    offset: [60, 0], // markArea中文字（name）显示在位置基础上x、y轴偏移
                                    color: '#fff'
                                }
                            }, {
                                yAxis: _this.WarnIndexData.level1
                            }],
                            [{
                                name: '警戒' + _this.WarnIndexData.level3 + 'm³/s',
                                yAxis: _this.WarnIndexData.level3,
                                itemStyle: {
                                    color: 'rgba(255,240,1,0.6)',
                                    opacity: _this.WarnIndexData.level3 == null || _this
                                        .WarnIndexData.level3 == '' ? 0 : 1
                                },
                                label: {
                                    show: !(_this.WarnIndexData.level3 == null || _this
                                        .WarnIndexData.level3 == ''),
                                    position: 'insideBottom', // markArea中文字（name）位置
                                    offset: [160, 0], // markArea中文字（name）显示在位置基础上x、y轴偏移
                                    color: '#fff'
                                }
                            }, {
                                yAxis: _this.WarnIndexData.level2
                            }],
                            [{
                                name: '关注' + _this.WarnIndexData.level4 + 'm³/s',
                                yAxis: _this.WarnIndexData.level4,
                                itemStyle: {
                                    color: 'rgba(14,25,234,.6)',
                                    opacity: _this.WarnIndexData.level4 == null || _this
                                        .WarnIndexData.level4 == '' ? 0 : 1
                                },
                                label: {
                                    show: !(_this.WarnIndexData.level4 == null || _this
                                        .WarnIndexData.level4 == ''),
                                    position: 'insideBottom', // markArea中文字（name）位置
                                    offset: [260, 0], // markArea中文字（name）显示在位置基础上x、y轴偏移
                                    color: '#fff'
                                }
                            }, {
                                yAxis: _this.WarnIndexData.level3
                            }],
                            [{
                                name: '',
                                yAxis: _this.minLl > 0 ? _this.minLl > bottomMarginL ? _this
                                    .minLl - bottomMarginL : _this.minLl : 0,
                                itemStyle: {
                                    color: 'rgba(9, 6, 58, 0.93)'
                                }
                            }, {
                                yAxis: _this.WarnIndexData.level4
                            }]
                        ]
                    },
                    data: []
                },
                {
                    name: '平行于y轴的趋势线',
                    type: 'line',
                    data: '',
                    markLine: {
                        symbol: '',
                        lineStyle: {
                            normal: {
                                type: 'solid',
                                width: 1,
                                color: '#6066FF'
                            }
                        },
                        data: [{
                            name: '预报时间',
                            xAxis: _this.streetData.ftime,
                            label: {
                                normal: {
                                    position: 'end',
                                    formatter: _this.streetData.ftime,
                                    color:'#fff',
                                }
                            }
                        }]
                    }
                },
                {
                    name: 'shi2',
                    type: 'line',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    markLine: {
                        symbol: '',
                        lineStyle: {
                            normal: {
                                type: 'solid',
                                width: 1,
                                color: '#6066FF'
                            }
                        },
                        data: [{
                            name: '预报时间',
                            xAxis: _this.streetData.ftime,
                            label: {
                                normal: {
                                    position: 'end',
                                    formatter: '预测时间',
                                    color: '#FFF'
                                }
                            }
                        }]
                    },
                    data: ''
                }
                ]
            }
            this.myChart = this.$echarts.init(document.getElementById('waterLevel'))
            this.myChart.setOption(option)
        }

    }
}
</script>
<style lang="less" scoped>
	.rainInfo_top {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
        margin-top: 10px;
        &>:nth-child(1){
            width: 100%;
            box-sizing: border-box;
            display: flex;
            background: rgba(0,165,233,0.3);
            padding: 10px 0 ;
            font-size: 14px;
            >div{
                box-sizing: border-box;
                flex: 1;
                color: #fff;
                border-left: 1px solid #4285A6;
                padding-left:10px ;
                >div{
                    background: url('~@/assets/newimg/矩形.png') no-repeat left center;
                    background-size: auto 66%;
                    &>:nth-child(1){
                        color: #A5C2D8;
                        margin-bottom: 4px;
                    }
                    span {
                        color: #fff;
                        display: block;
                        text-indent: 14px;
                    }
                    .spaninline{
                        display: inline-block;
                    }
                }
            }
            &>:nth-child(1){
                border: none;
            }
        }
        >div:nth-child(2){
            width: 31%;
        }
        >div:nth-child(3){
            width: 40%;
            text-indent: 30px;
            text-align: left;
        }
		.rainInfo_top_btn_span {
			span {
				background-color: #102065;
				color: #fff;
				border-color: #1e2f74;
			}
		}
	}
	.echartsWrap {
        width: 100%;
        min-height:50vh;
		height: calc(100% - 140px);

		#waterLevel {
            min-height:50vh;
			width: 100%;
			height: 100%;
		}
    }
    .posrtlv{
      position: relative;
    }
    .echartsWrapnoData{
        width:150px;
        position: absolute;
        top:45%;
        left:45%;
    }
    .subtitle{
        height: 28px;
        line-height: 0px;
        margin: 5px 0 4px 0;
        text-indent: 4px;
        font-size: 15px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #FFFFFF;
        background: url('~@/assets/dialog/dialogBT.png') no-repeat center;
        background-size: 100% 100%;
    }
</style>
